﻿@{
    Layout = null;
    ViewData["Title"] = "BianGenCaoZuo";
}
<script src="~/js/vue.js"></script>
<script src="~/js/axios.js"></script>
<script src="~/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="~/element-ui/lib/theme-chalk/index.css" />
<div id="app">
    <table width="90%">
        <tr>
            <td>
                <font color="black">您正在做的业务是：人力资源--人力资源档案管理--人力资源档案变更 </font>
            </td>
        </tr>
        <tr>
            <td align="right">
                <el-button type="primary" size="small" v-on:click="BianGen()">变更</el-button>
                <el-button type="primary" size="small" v-on:click="QingChu()">返回</el-button>
            </td>
        </tr>
    </table>

    <table width="90%" border="1" cellpadding=3 cellspacing=1
           bordercolorlight=#848284 bordercolordark=#eeeeee
           class="TABLE_STYLE1">
        <tr>
            <td class="TD_STYLE1">
                档案编号
            </td>
            <td colspan="6" class="TD_STYLE2">
                <el-input v-model="human_id" readonly></el-input>
            </td>
        <tr>
            <td class="TD_STYLE1">
                I级机构
            </td>
            <td class="TD_STYLE2">
                <el-input v-model="first_kind_name" readonly></el-input>
            </td>
            <td class="TD_STYLE1">
                II级机构
            </td>
            <td class="TD_STYLE2">
                <el-input v-model="second_kind_name" readonly></el-input>
            </td>
            <td class="TD_STYLE1">
                III级机构
            </td>
            <td class="TD_STYLE2">
                <el-input v-model="third_kind_name" readonly></el-input>
            </td>
        </tr>
        <tr>
            <td class="TD_STYLE1">
                职位分类
            </td>
            <td class="TD_STYLE2">
                <el-input v-model="human_major_kind_name" readonly></el-input>
            </td>
            <td class="TD_STYLE1">
                职位名称
            </td>
            <td class="TD_STYLE2">
                <el-input v-model="human_major_name" readonly></el-input>
            </td>
            <td class="TD_STYLE1">
                职称
            </td>
            <td colspan="2" class="TD_STYLE2">
                <el-select v-model="human_pro_designation" placeholder="请选择职称" v-on:change="ZhiCheng()">
                    <el-option v-for="item in zhiCheng"
                               :key="item.pbc_id"
                               :lable="item.attribute_name"
                               :value="item.attribute_name">
                    </el-option>
                </el-select>
            </td>
            <td rowspan="4" style="text-align: center;">
                <el-upload class="avatar-uploader"
                           action="/RenLiZiYuanDangAnGuanLi/Img"
                           :show-file-list="false"
                           @*:on-success="handleAvatarSuccess"
                           :before-upload="beforeAvatarUpload"*@>
                    <img  :src="human_picture" class="avatar">
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </td>
        </tr>
        <tr>
            <td class="TD_STYLE1">
                姓名
            </td>
            <td class="TD_STYLE2">
                <el-input v-model="human_name"></el-input>
            </td>
            <td class="TD_STYLE1">
                性别
            </td>
            <td class="TD_STYLE2">
                <el-input v-model="human_sex" readonly></el-input>
            </td>
            <td class="TD_STYLE1">
                EMAIL
            </td>
            <td colspan="2" class="TD_STYLE2">
                <el-input v-model="human_email"></el-input>
            </td>
        </tr>
        <tr>
            <td class="TD_STYLE1">
                电话
            </td>
            <td class="TD_STYLE2">
                <el-input v-model="human_telephone"></el-input>
            </td>
            <td class="TD_STYLE1">
                QQ
            </td>
            <td class="TD_STYLE2">
                <el-input v-model="human_qq"></el-input>
            </td>
            <td class="TD_STYLE1">
                手机
            </td>
            <td colspan="2" class="TD_STYLE2">
                <el-input v-model="human_mobilephone"></el-input>
            </td>
        </tr>
        <tr>
            <td class="TD_STYLE1">
                住址
            </td>
            <td colspan="3" class="TD_STYLE2">
                <el-input v-model="human_address"></el-input>
            </td>
            <td class="TD_STYLE1">
                邮编
            </td>
            <td colspan="2" class="TD_STYLE2">
                <el-input v-model="human_postcode"></el-input>
            </td>
        </tr>
        <tr>
            <td class="TD_STYLE1">
                国籍
            </td>
            <td class="TD_STYLE2">
                <el-select v-model="human_nationality" placeholder="请选择国籍" v-on:change="GuoJi()">
                    <el-option v-for="item in guoJi"
                               :key="item.pbc_id"
                               :lable="item.attribute_name"
                               :value="item.attribute_name">
                    </el-option>
                </el-select>
            </td>
            <td class="TD_STYLE1">
                出生地
            </td>
            <td class="TD_STYLE2">
                <el-input v-model="human_birthplace"></el-input>
            </td>
            <td class="TD_STYLE1">
                生日
            </td>
            <td width="13%" class="TD_STYLE2">
                <el-input v-model="human_birthday" readonly></el-input>
            </td>
            <td width="11%" class="TD_STYLE1">
                民族
            </td>
            <td class="TD_STYLE2" width="14%">
                <el-select v-model="human_race" placeholder="请选择民族" v-on:change="MinZu()">
                    <el-option v-for="item in minZu"
                               :key="item.pbc_id"
                               :lable="item.attribute_name"
                               :value="item.attribute_name">
                    </el-option>
                </el-select>
            </td>
        </tr>
        <tr>
            <td class="TD_STYLE1">
                宗教信仰
            </td>
            <td class="TD_STYLE2">
                <el-select v-model="human_religion" placeholder="请选择宗教信仰" v-on:change="ZongJiao()">
                    <el-option v-for="item in zongJiao"
                               :key="item.pbc_id"
                               :lable="item.attribute_name"
                               :value="item.attribute_name">
                    </el-option>
                </el-select>
            </td>
            <td class="TD_STYLE1">
                政治面貌
            </td>
            <td class="TD_STYLE2">
                <el-select v-model="human_party" placeholder="请选择政治面貌" v-on:change="ZhenZhiMianMao()">
                    <el-option v-for="item in zhenZhiMianMao"
                               :key="item.pbc_id"
                               :lable="item.attribute_name"
                               :value="item.attribute_name">
                    </el-option>
                </el-select>
            </td>
            <td class="TD_STYLE1">
                身份证号码
            </td>
            <td class="TD_STYLE2">
                <el-input v-model="human_id_card" v-on:blur="getAge()"></el-input>
            </td>
            <td class="TD_STYLE1">
                社会保障号码
            </td>
            <td class="TD_STYLE2">
                <el-input v-model="human_society_security_id" class="INPUT_STYLE2"></el-input>
            </td>
        </tr>
        <tr>
            <td class="TD_STYLE1">
                年龄
            </td>
            <td class="TD_STYLE2">
                <el-input v-model="human_age" readonly="readonly"></el-input>
            </td>
            <td class="TD_STYLE1">
                学历
            </td>
            <td class="TD_STYLE2">
                <el-select v-model="human_educated_degree" placeholder="请选择学历" v-on:change="XueLi()">
                    <el-option v-for="item in xueLi"
                               :key="item.pbc_id"
                               :lable="item.attribute_name"
                               :value="item.attribute_name">
                    </el-option>
                </el-select>
            </td>
            <td class="TD_STYLE1">
                教育年限
            </td>
            <td class="TD_STYLE2">
                <el-select v-model="human_educated_years" placeholder="请选择教育年限" v-on:change="JiaoYuNianXian()">
                    <el-option v-for="item in jiaoYuNianXian"
                               :key="item.pbc_id"
                               :lable="item.attribute_name"
                               :value="item.attribute_name">
                    </el-option>
                </el-select>
            </td>
            <td class="TD_STYLE1">
                学历专业
            </td>
            <td class="TD_STYLE2">
                <el-select v-model="human_educated_major" placeholder="请选择学历专业" v-on:change="ZhuanYe()">
                    <el-option v-for="item in zhuanYe"
                               :key="item.pbc_id"
                               :lable="item.attribute_name"
                               :value="item.attribute_name">
                    </el-option>
                </el-select>
            </td>
        </tr>
        <tr>
            <td class="TD_STYLE1">
                薪酬标准
            </td>
            <td class="TD_STYLE2">
                <el-select v-model="salary_standard_name" placeholder="请选择薪酬标准" @*v-on:change="XinChou()"*@>
                    <el-option v-for="item in xinChou"
                               :key="item.standard_id"
                               :lable="item.standard_name"
                               :value="[item.standard_id,item.standard_name,item.salary_sum]">
                    </el-option>
                </el-select>
            </td>
            <td class="TD_STYLE1">
                开户行
            </td>
            <td class="TD_STYLE2">
                <el-input v-model="human_bank"></el-input>
            </td>
            <td class="TD_STYLE1">
                帐号
            </td>
            <td class="TD_STYLE2">
                <el-input v-model="human_account"></el-input>
            </td>
            <td class="TD_STYLE1">
                变更人
            </td>
            <td class="TD_STYLE2">
                <el-input v-model="changer"></el-input>
            </td>
        </tr>
        <tr>
            <td class="TD_STYLE1">
                变更时间
            </td>
            <td class="TD_STYLE2">
                <el-input v-model="change_time" readonly></el-input>
            </td>
            <td class="TD_STYLE1">
                特长
            </td>
            <td class="TD_STYLE2">
                <el-select v-model="human_speciality" placeholder="请选择特长" v-on:change="TeChang()">
                    <el-option v-for="item in teChang"
                               :key="item.pbc_id"
                               :lable="item.attribute_name"
                               :value="item.attribute_name">
                    </el-option>
                </el-select>
            </td>
            <td class="TD_STYLE1">
                爱好
            </td>
            <td class="TD_STYLE2">
                <el-select v-model="human_hobby" placeholder="请选择爱好" v-on:change="AiHao()">
                    <el-option v-for="item in aiHao"
                               :key="item.pbc_id"
                               :lable="item.attribute_name"
                               :value="item.attribute_name">
                    </el-option>
                </el-select>
            </td>
            <td class="TD_STYLE1">
                &nbsp;
            </td>
            <td class="TD_STYLE2">
                &nbsp;
            </td>
        </tr>
        <tr>
            <td class="TD_STYLE1">
                档案附件
            </td>
            <td colspan="7" class="TD_STYLE2">
                    @*<el-input v-model="attachment_name" readonly></el-input>*@
                    @*<el-upload
                class="upload-demo"
                action="/RenLiZiYuanDangAnGuanLi/WenDang"
                :on-change="handleChange"
                :file-list="fileList">
                <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>*@
                <a :href=href>{{fujian}}</a>
            </td>
            </td>
        </tr>
        <tr>
            <td class="TD_STYLE1">
                个人履历
            </td>
            <td colspan="7" class="TD_STYLE2">
                <el-input type="textarea" v-model="human_histroy_records"></el-input>
            </td>
        </tr>
        <tr>
            <td class="TD_STYLE1">
                家庭关系信息
            </td>
            <td colspan="7" class="TD_STYLE2">
                <el-input type="textarea" v-model="human_family_membership"></el-input>
            </td>
        </tr>
        <tr>
            <td class="TD_STYLE1">
                备注
            </td>
            <td colspan="7" class="TD_STYLE2">
                <el-input type="textarea" v-model="remark"></el-input>
            </td>
        </tr>
    </table>

</div>

<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            input: "",
            aiHao: [],
            teChang: [],
            zhuanYe: [],
            jiaoYuNianXian: [],
            xueLi: [],
            zhenZhiMianMao: [],
            guoJi: [],
            zongJiao: [],
            minZu: [],
            zhiCheng: [],
            xinChou: [],

            human_id: "",
            first_kind_id: "",
            first_kind_name: "",
            second_kind_id: "",
            second_kind_name: "",
            third_kind_id: "",
            third_kind_name: "",
            human_major_kind_id: "",
            human_major_kind_name: "",
            human_major_id: "",
            human_major_name: "",
            human_name: "",
            human_sex: "",
            human_address: "",
            human_postcode: "",
            human_pro_designation: "",
            human_telephone: "",
            human_bank: "",
            human_account: "",
            human_qq: "",
            human_hobby: "",
            human_speciality: "",
            human_religion: "",
            human_party: "",
            human_nationality: "",
            human_race: "",
            human_birthday: "",
            human_histroy_records: "",
            human_age: "",
            human_educated_degree: "",
            human_educated_years: "",
            human_educated_major: "",
            human_society_security_id: "",
            human_id_card: "",
            remark: "",
            salary_standard_id: "",
            salary_standard_name: [],
            key: [],
            zhi: [],
            human_picture: "",
            regist_time: "",
            attachment_name: "",
            u_roleID: localStorage.getItem("u_roleID"),
            human_family_membership: "",
            human_histroy_records: "",
            human_email: "",
            human_mobilephone: "",
            human_birthplace: "",
            first_kind_name: "",
            second_kind_name: "",
            third_kind_name: "",
            changer: "",
            change_time: "",
            fujian: "",
            href: "",
            //图片
            imageUrl: '',
            //文档
            fileList: [],
        },
        methods: {
            AiHao() {
                axios.get("/JianLiGuanLi/AiHao").then(res => {
                    this.aiHao = res.data;
                })
            },
            TeChang() {
                axios.get("/JianLiGuanLi/TeChang").then(res => {
                    this.teChang = res.data;
                })
            },
            ZhuanYe() {
                axios.get("/JianLiGuanLi/ZhuanYe").then(res => {
                    this.zhuanYe = res.data;
                })
            },
            JiaoYuNianXian() {
                axios.get("/JianLiGuanLi/JiaoYuNianXian").then(res => {
                    this.jiaoYuNianXian = res.data;
                })
            },
            XueLi() {
                axios.get("/JianLiGuanLi/XueLi").then(res => {
                    this.xueLi = res.data;
                })
            },
            ZhenZhiMianMao() {
                axios.get("/JianLiGuanLi/ZhengZhiMianMao").then(res => {
                    this.zhenZhiMianMao = res.data;
                })
            },
            GuoJi() {
                axios.get("/JianLiGuanLi/GuoJi").then(res => {
                    this.guoJi = res.data;
                })
            },
            ZongJiao() {
                axios.get("/JianLiGuanLi/ZongJiao").then(res => {
                    this.zongJiao = res.data;
                })
            },
            MinZu() {
                axios.get("/JianLiGuanLi/MinZu").then(res => {
                    this.minZu = res.data;
                })
            },
            ZhiCheng() {
                axios.get("/JianLiGuanLi/ZhiCheng").then(res => {
                    this.zhiCheng = res.data;
                })
            },
            XinChou(){
            	axios.get("/RenLiZiYuanDangAnGuanLi/XinChou").then(res=>{
            		//console.info(res.data);
            		this.xinChou = res.data;
            	})
            },
            //根据输入的身份证号 去计算年龄
            getAge() {
                var len = (this.human_id_card + "").length;
                if (len == 0) {
                    return 0;
                }
                else {
                    if ((len != 15) && (len != 18)) {//身份证号码只能为15位或18位其它不合法
                        return 0;
                    }
                }
                var human_birthday;
                var human_age;
                if (len == 18) {//处理18位的身份证号码从号码中得到生日和性别代码
                    human_birthday = this.human_id_card.substr(6, 4) + "-" + Number(this.human_id_card.substr(10, 2)) + "-" + Number(this.human_id_card.substr(12, 2));
                } else if (len == 15) {
                    human_birthday = "19" + this.human_id_card.substr(6, 2) + "-" + Number(this.human_id_card.substr(8, 2)) + "-" + Number(this.human_id_card.substr(10, 2));
                }
                //时间字符串里，必须是“-”而不是“/”
                var birthDate = new Date(human_birthday);
                var nowDateTime = new Date();
                human_age = nowDateTime.getFullYear() - birthDate.getFullYear();
                //计算虚岁
                //if (nowDateTime.getMonth() < birthDate.getMonth()) {
                //    human_age--;
                //} else if (nowDateTime.getMonth() == birthDate.getMonth()) {
                //    if (nowDateTime.getDate() < birthDate.getDate()) {
                //        human_age--;
                //    }
                //}
                this.human_age = human_age;
                this.human_birthday = human_birthday;
                this.getSex();
            },
            //根据输入的身份证号 去计算性别
            getSex() {
                //获取输入身份证号码
                var idCard = this.human_id_card;
                //console.info(idCard)
                //var human_sex;
                //获取出生日期
                //this.human_birthday=idCard.substr(6,10)+"-"+idCard.substr(10,12)+"-"+idCard.substr(12,14);
                //获取性别
                //console.info(1%2);
                if (idCard.substr(16, 1) % 2 != 0) {
                    human_sex = "男";
                } else {
                    human_sex = "女";
                }
                this.human_sex = human_sex;
            },
            //时间
            tick() {
                var d = new Date();
                var y = d.getFullYear();
                var moth = d.getMonth() + 1;
                var date = d.getDate();
                var h = d.getHours();
                var m = d.getMinutes();
                var s = d.getSeconds();
                var hh = 20 - 1 - h;
                var mm = 60 - 1 - m;
                var ss = 60 - s;
                if (hh > 0) {
                    mm = mm + 60 * hh;
                }
                if (moth < 10) {
                    moth = "0" + moth;
                }
                if (date < 10) {
                    date = "0" + date;
                }
                if (h < 10) {
                    h = "0" + h;
                }
                if (m < 10) {
                    m = "0" + m;
                }
                if (s < 10) {
                    s = "0" + s;
                }
                if (mm < 10) {
                    mm = "0" + mm;
                }
                if (ss < 10) {
                    ss = "0" + ss;
                }
                this.change_time = y + " - " + moth + " - " + date + " " + h + ": " + m + ": " + s;
            },
            //图片的方法 成功
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                //接收图片路径
                var luJin = res;
                //接收图片名字
                var imgName = "";
                //截取  文件名多长 文件夹
                imgName = luJin.slice(10);
                //console.info(imgName);
                this.human_picture = "\\uploaders\\" + imgName;
                console.info("this.human_picture:", this.human_picture);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            //档案附件
            handleChange(file, fileList) {
                this.fileList = fileList.slice(-3);
                //接收文档路径
                this.attachment_name = file.response;
            },
            //点击提交
            BianGen() {
                //截取文档附件
                //var wendang="";
                //wendang=this.attachment_name.slice(5);
                //alert(wendang);
                axios.get("/RenLiZiYuanDangAnGuanLi/UpdBianGen", {
                    params: {
                        huf_id: this.huf_id,
                        human_name: this.human_name,
                        human_address: this.human_address,
                        human_postcode: this.human_postcode,
                        human_pro_designation: this.human_pro_designation,
                        human_telephone: this.human_telephone,
                        human_mobilephone: this.human_mobilephone,
                        human_bank: this.human_bank,
                        human_account: this.human_account,
                        human_qq: this.human_qq,
                        human_email: this.human_email,
                        human_hobby: this.human_hobby,
                        human_speciality: this.human_speciality,
                        human_sex: this.human_sex,
                        human_religion: this.human_religion,
                        human_party: this.human_party,
                        human_nationality: this.human_nationality,
                        human_race: this.human_race,
                        human_birthday: this.human_birthday,
                        human_birthplace: this.human_birthplace,
                        human_age: this.human_age,
                        human_educated_degree: this.human_educated_degree,
                        human_educated_years: this.human_educated_years,
                        human_educated_major: this.human_educated_major,
                        human_society_security_id: this.human_society_security_id,
                        human_id_card: this.human_id_card,
                        remark: this.remark,
                        salary_standard_id: this.salary_standard_name[0],
                        salary_standard_name: this.salary_standard_name[1],
                        salary_sum: this.salary_standard_name[2],
                        demand_salaray_sum: this.salary_standard_name[2],
                        paid_salary_sum: this.salary_standard_name[2],
                        human_histroy_records: this.human_histroy_records,
                        human_family_membership: this.human_family_membership,
                        human_picture: this.human_picture,
                        check_status: 1,
                        changer: this.changer,
                        change_time: this.change_time,
                    }
                }).then(res => {
                    if (res.data > 0) {
                        alert("变更成功");
                        //再进一次这个页面  相当于刷新
                        //location.href="/RenLiZiYuanDangAnGuanLi/FuHeYeMian";
                        //跳到登记复核页面
                        location.href = "/RenLiZiYuanDangAnGuanLi/DengJiFuHe";
                    } else {
                        alert("变更失败");
                    }
                })
                //}).catch(error=>{
                //	console.info(error);
                //})
            },
            //点击清空 重新进一次页面
            QingChu() {
                location.href = "/RenLiZiYuanDangAnGuanLi/DangAnBianGen";
            },
        },
        mounted() {
            window.onload = this.tick;
            var out = window.setInterval(this.tick, 1000);
            this.ZhiCheng();
            this.AiHao();
            this.TeChang();
            this.ZhuanYe();
            this.JiaoYuNianXian();
            this.XueLi();
            this.ZhenZhiMianMao();
            this.GuoJi();
            this.ZongJiao();
            this.MinZu();
            //this.XinChou();
            var model = JSON.parse('@Html.Raw(ViewBag.Model)');
            console.log(model);
            this.huf_id = model[0].huf_id;
            this.human_id = model[0].human_id;
            this.first_kind_name = model[0].first_kind_name;
            this.second_kind_name = model[0].second_kind_name;
            this.third_kind_name = model[0].third_kind_name;
            this.human_major_kind_name = model[0].human_major_kind_name;
            this.human_major_name = model[0].human_major_name;
            this.human_name = model[0].human_name;
            this.human_sex = model[0].human_sex;
            this.human_address = model[0].human_address;
            this.human_postcode = model[0].human_postcode;
            this.human_telephone = model[0].human_telephone;
            this.human_bank = model[0].human_bank;
            this.human_account = model[0].human_account;
            this.human_hobby = model[0].human_hobby;
            this.human_speciality = model[0].human_speciality;
            this.human_religion = model[0].human_religion;
            this.human_party = model[0].human_party;
            this.human_id_card = model[0].human_id_card;
            this.human_nationality = model[0].human_nationality;
            this.human_race = model[0].human_race;
            this.human_birthday = model[0].human_birthday;
            this.human_age = model[0].human_age;
            this.human_educated_degree = model[0].human_educated_degree;
            this.human_educated_years = model[0].human_educated_years;
            this.human_educated_major = model[0].human_educated_major;
            this.human_society_security_id = model[0].human_society_security_id;
            this.human_picture = model[0].human_picture;
            console.info("图片路径：", this.human_picture);
            //文件路径
            this.href = "../File/" + model[0].attachment_name;
            this.fujian = model[0].attachment_name;
            this.remark = model[0].remark;
            this.human_family_membership = model[0].human_family_membership;
            this.human_histroy_records = model[0].human_histroy_records;
            this.human_email = model[0].human_email;
            this.human_mobilephone = model[0].human_mobilephone;
            this.human_birthplace = model[0].human_birthplace;
            this.salary_standard_name = model[0].salary_standard_name;
            this.human_pro_designation = model[0].human_pro_designation;
            this.human_qq = model[0].human_qq;
            this.changer = localStorage.getItem("u_name");
        }
    })
</script>
<style scoped>
    * {
        font-size: 13px;
        border-collapse: collapse;
    }

    .TD_STYLE1 {
        background-color: white;
    }

    .INPUT_STYLE2 {
        BACKGROUND-COLOR: #FFFFCC;
        width: 100%;
    }

    .TABLE_STYLE1 {
        width: 90%;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
